<template>
  <view class="lotteryAnimation">
    <!-- 开奖中 -->
    <view class="lotterying" v-if="!isShowResult">
      <view class="text" v-text="title"></view>
      <view class="avatars" :style="{ 'background-image': 'url(' + IMAGES.GAME_BORDER + ')' }"><image :src="url"></image></view>
      <view class="attrs">
        <view class="border"><view v-for="(item, index) in attrs" :key="index" v-text="item.title"></view></view>
      </view>
    </view>
    <!-- 开奖完成 -->
    <view class="lotteryed" v-else>
      <view class="text">
        <image v-if="isWin" :src="IMAGES.GAME_WIN"></image>
        <image v-else :src="IMAGES.GAME_TRANSPORT"></image>
      </view>

      <view
        class="image"
        :style="{
          'background-image': 'url(' + IMAGES.GAME_HENG + ')'
        }"
      >
        <view class="avatar"><image :src="url"></image></view>
      </view>
      <view class="name win" v-if="isWin">
        <view>本期获得：</view>
        <view>{{ STATE.guessHero.score | float2int }}</view>
      </view>
      <view class="name" v-else v-text="name"></view>
      <view class="attrs">
        <view :class="{ win: item.isWin }" :style="item.isWin ? 'background-image:url(' + IMAGES.GAME_CAIZHONG + ');' : ''" v-for="(item, index) in attrs" :key="index">
          <view class="light"><text v-text="item.title"></text></view>
        </view>
      </view>
    </view>
    <!-- 赢了弹窗 -->
    <view class="lotteryModal" v-if="isShowModal">
      <view class="mask"></view>
      <view class="lotteryed animated animation-scale-up">
        <view class="text"><image :src="IMAGES.GAME_WIN"></image></view>
        <view class="image">
          <view class="avatar"><image :src="url"></image></view>
        </view>
        <view class="name win">
          <view>本期获得积分：</view>
          <view>{{ STATE.guessHero.score | float2int }}</view>
        </view>
        <view class="attrs">
          <view :class="{ win: item.isWin }" :style="item.isWin ? 'background-image:url(' + IMAGES.GAME_CAIZHONG + ');' : ''"  v-for="(item, index) in attrs" :key="index">
            <view class="light"><text v-text="item.title"></text></view>
          </view>
        </view>
        <view class="btn"><button @tap.stop="hideModal">确 定</button></view>
        <view class="tip">({{ closeTime }}s后自动关闭)</view>
      </view>
    </view>
  </view>
</template>

<script>
// 组件内不支持onUnload,onHide,onShow,onLoad,onReady
// 支持 created mounted
import { IMAGES } from "@/config/resources";
import { randomNum, debounce } from "@/utils";
let lotteryingTimer, lotteryedTimer, closeTimer; // 关闭弹窗;
export default {
  name: "lotteryAnimation",
  data() {
    return {
      title: "正在开奖中...",
      speed: 200, // 速度
      url: "",
      name: "", // 开奖英雄名称
      attrs: [],

      isShowResult: false, //是否显示结果
      isSubmit: false, // 是否提交竞猜了
      isWin: false, // 是否赢了

      isShowModal: false,
      closeTime: 5
    };
  },
  watch: {
    type: {
      immediate: true,
      handler(n) {
        this.isShowResult = false;
        clearInterval(lotteryingTimer);
        clearInterval(lotteryedTimer);
        clearInterval(closeTimer);
        if (n === "lotterying") {
          lotteryingTimer = this.playAnimation();
        }
        if (n === "lotteryed") {
          lotteryedTimer = this.playAnimation();
          this.onLotteryed();
        }
      }
    },
    currentGame: {
      handler(n) {
        // 切换房间
        clearInterval(lotteryingTimer);
        clearInterval(lotteryedTimer);
        clearInterval(closeTimer);
      }
    }
  },
  computed: {
    IMAGES: () => IMAGES,
    type() {
      return this.$store.state.guessHero.type;
    },
    currentGame() {
      return this.$store.state.guessHero.currentGame;
    },
    allHeros() {
      return this.$store.state.guessHero.games[this.$store.state.guessHero.currentGame].allHeros;
    }
  },
  methods: {
    playAnimation() {
      console.warn("开奖啦");
      this.isShowResult = false;
      this.title = "正在开奖中...";
      this.attrs = [];
      let allHeros = this.allHeros;
      let timer;
      timer = setInterval(() => {
        let rand = randomNum(0, allHeros.length - 1);
        this.url = allHeros[rand]["icon"] || "";
        if (this.type !== "lotterying" && this.type !== "lotteryed") {
          clearInterval(timer);
        }
      }, 200);
      return timer;
    },
    onLotteryed() {
      clearInterval(lotteryingTimer);
      let guessHero = this.$store.state.guessHero;
      let data = guessHero.typeData;
      // 规定属性开出时间间隔1s
      this.attrs = [];
      this.closeTime = data.time - 5;
      // 判断当前是否提交竞猜了
      let currentGameInfo = guessHero.games[guessHero.currentGame];
      this.isSubmit = currentGameInfo.isSubmit;
      this.attrs.push({ title: "", isWin: false });
      setTimeout(() => {
        this.attrs[0].title = data.hero.num === 2 ? "双号" : "单号";
        this.attrs[0].isWin = currentGameInfo.submitData && currentGameInfo.submitData.num && data.hero.num === currentGameInfo.submitData.num ? true : false;
      }, 500);
      setTimeout(() => {
        this.attrs.push({ title: "", isWin: false });
        setTimeout(() => {
          this.attrs[1].title = data.hero.sex === 2 ? "女性" : "男性";
          this.attrs[1].isWin = currentGameInfo.submitData && currentGameInfo.submitData.sex && data.hero.sex === currentGameInfo.submitData.sex ? true : false;
        }, 500);
      }, 1000);
      setTimeout(() => {
        this.attrs.push({ title: "", isWin: false });
        setTimeout(() => {
          this.attrs[2].title = data.hero.remote === 2 ? "近战" : "远程";
          this.attrs[2].isWin = currentGameInfo.submitData && currentGameInfo.submitData.remote && data.hero.remote === currentGameInfo.submitData.remote ? true : false;
        }, 500);
      }, 2000);
      setTimeout(() => {
        this.attrs.push({ title: "", isWin: false });
        clearInterval(lotteryingTimer);
        clearInterval(lotteryingTimer);
        clearInterval(lotteryingTimer);
        clearInterval(lotteryedTimer);
        clearInterval(lotteryedTimer);
        clearInterval(lotteryedTimer);
        setTimeout(() => {
          this.title = "开奖完成";
          this.attrs[3].title = data.hero.magic === 2 ? "无魔法" : "有魔法";
          this.attrs[3].isWin = currentGameInfo.submitData && currentGameInfo.submitData.magic && data.hero.magic === currentGameInfo.submitData.magic ? true : false;
          this.url = data.hero.icon;
          this.name = data.hero.name;
          console.warn(this.url, this.name);
          this.isShowResult = true;
          if (this.isSubmit) {
            this.isWin = false;
            for (let i in this.attrs) {
              if (this.attrs[i].isWin === true) {
                this.isWin = true;
                // 弹窗
                this.isShowModal = true;
                closeTimer = setInterval(() => {
                  this.closeTime--;
                  if (this.closeTime <= 0) {
                    this.isShowModal = false;
                    clearInterval(closeTimer);
                  }
                }, 1000);
                break;
              }
            }
          }
          this.$forceUpdate();
        }, 500);
      }, 3000);
    },
    hideModal() {
      this.isShowModal = false;
      clearInterval(closeTimer);
    }
  },
  destroyed() {
    clearInterval(lotteryingTimer);
    clearInterval(lotteryedTimer);
    clearInterval(closeTimer);
  }
};
</script>

<style lang="scss" scoped>
.lotteryAnimation {
  height: 100%;
  width: 100%;
  > .lotterying,
  > .lotteryed {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  // 开奖中
  .lotterying {
    padding: 40upx 0;
    .text {
      text-align: center;
      line-height: 50upx;
    }
    .avatars {
      margin: 0 auto;
      width: 200upx;
      height: 200upx;
      background-size: 100% 100%;
      padding: 30upx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .attrs {
      margin: 0 auto;
      width: 500upx;
      height: 100upx;
      position: relative;
      overflow: hidden;
      .border {
        margin-top: 20upx;
        height: 60upx;
        display: flex;
        align-items: center;
        border: 3upx solid #cccccc;
        border-radius: 8upx;
        background-color: #000000;
        > view {
          position: relative;
          height: 60upx;
          line-height: 60upx;
          background-size: 100% 100%;
          width: 25%;
          text-align: center;
          font-size: 24upx;
          &::before {
            content: " ";
            position: absolute;
            left: 0;
            top: -50%;
            right: 0;
            bottom: 0;
            width: 90%;
            height: 200%;
            animation: textLight 1s;
            background-size: 100% 100%;
          }
        }
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -4upx;
        bottom: 0;
        width: 100%;
        height: calc(100% + 4upx);
        animation: borderTwinkle 1s infinite;
        background-size: 100% 100%;
      }
    }
  }
  // 开奖结果
  .lotteryed {
    .text {
      width: 500upx;
      height: 100upx;
      margin: 0 auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .image {
      background-size: 100% 100%;
      width: 100%;
      height: 300upx;
      margin-top: -70upx;
      overflow: hidden;
      position: relative;
      // 闪光
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
        width: 400upx;
        height: 300upx;
        animation: textLight 1s;
        background-size: 100% 100%;
      }
      .avatar {
        margin: 0 auto;
        margin-top: 70upx;
        width: 165upx;
        height: 165upx;
        border: 5upx solid #ffffff;
        border-radius: 8upx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .name {
      margin-top: -50upx;
      text-align: center;
      font-size: 32upx;
      color: #ffffff;
      &.win {
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 0 6upx #fb7299, 0 0 10upx #fb7299, 0 0 20upx #fb7299, 0 0 30upx #fb7299;
        color: #ffffff;
        view {
          &:first-child {
            font-size: 26upx;
          }
          &:last-child {
            font-size: 42upx;
          }
        }
      }
    }
    .attrs {
      margin: 0 auto;
      margin-top: 10upx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 500upx;
      height: 74upx;
      > view {
        width: 123upx;
        text-align: center;
        font-size: 24upx;
        color: #ffffff;
        &.win {
          background-size: 100% 100%;
          position: relative;
          height: 100%;
          .light {
            position: absolute;
            bottom: 9upx;
            left: 10upx;
            right: 0;
            width: 95upx;
            height: 38upx;
            text-align: center;
            overflow: hidden;
            text {
              font-size: 24upx;
            }
            &::after {
              position: absolute;
              content: "";
              background-color: rgba($color: #ffffff, $alpha: 0.6);
              box-shadow: 0 0 40upx 24upx #ffffff;
              animation: winLight 2s infinite;
              top: 18upx;
              width: 0;
              height: 0;
            }
          }
        }
      }
    }
  }

  // 中奖了弹窗
  .lotteryModal {
    z-index: 1000;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .mask {
      z-index: -1;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba($color: #000000, $alpha: 0.8);
      width: 100%;
      height: 100%;
    }
    .lotteryed {
      width: 100%;
      .btn {
        margin: 20upx auto;
        button {
          background-color: #fa7297;
          border-radius: 2500px;
          color: #ffffff;
          width: 300upx;
          margin: 0 auto;
        }
      }
      .tip {
        text-align: center;
        font-size: 24upx;
      }
    }
  }
}
@keyframes borderTwinkle {
  0%,
  70% {
    background-image: url("~@/static/animation/17w_game_fx_clo1.png");
  }
  10%,
  80% {
    background-image: url("~@/static/animation/17w_game_fx_clo2.png");
  }
  20%,
  90% {
    background-image: url("~@/static/animation/17w_game_fx_clo3.png");
  }
  30%,
  100% {
    background-image: url("~@/static/animation/17w_game_fx_clo4.png");
  }
  40% {
    background-image: url("~@/static/animation/17w_game_fx_clo5.png");
  }
  50% {
    background-image: url("~@/static/animation/17w_game_fx_clo6.png");
  }
  60% {
    background-image: url("~@/static/animation/17w_game_fx_clo7.png");
  }
}

@keyframes textLight {
  0% {
    background-image: url("~@/static/animation/17w_game_fx_lig1.png");
  }
  10% {
    background-image: url("~@/static/animation/17w_game_fx_lig2.png");
  }
  20% {
    background-image: url("~@/static/animation/17w_game_fx_lig3.png");
  }
  30% {
    background-image: url("~@/static/animation/17w_game_fx_lig4.png");
  }
  40% {
    background-image: url("~@/static/animation/17w_game_fx_lig5.png");
  }
  50% {
    background-image: url("~@/static/animation/17w_game_fx_lig6.png");
  }
  100% {
    background-image: url("~@/static/animation/17w_game_fx_lig7.png");
  }
}
@keyframes winLight {
  from {
    left: 90upx;
  }
  to {
    left: -40upx;
  }
}
</style>
